<script setup lang="ts">
import { ref, onMounted } from "vue";
const list = [{'/':'首页'}]
import Breadcrumb from "@/components/Breadcrumb .vue";
import LayoutBanner from "@/views/Home/LayoutBanner.vue";
import Goods from "@/components/Goods.vue";
import {getCateProductAPI} from '@/api/catorgre/index'
import {onBeforeRouteUpdate, useRoute} from "vue-router";
const route = useRoute();
const categoryList = ref([])
const categoryName = ref('')
const getCateProduct = async (id=route.params.id)=>{
  const res = await getCateProductAPI(id)
  categoryName.value = res.result.name
  categoryList.value = res.result.children
  console.log(res)
}
onMounted(()=>{
  getCateProduct()
})

//路由更新后，数据需要重新获取
onBeforeRouteUpdate((to)=>{
  getCateProduct(to.params.id)
})
</script>

<template>
<div class="CategoryPage">
  <!--  面包屑-->
  <Breadcrumb :list  :active="`${categoryName}`"/>
  <!--  轮播图-->
  <LayoutBanner :is-category="false"/>

  <div class="allCategory">
    <h1>全部分类</h1>
    <ul class="childCate">
      <li v-for="(item,i) in categoryList" :key="i">
        <router-link :to="`/category/sub/${item.id}`">
          <img :src="item.picture"/>
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>


<!--    全部商品-->
    <ul class="subCateProduct">
      <li v-for="(item,i) in categoryList" :key="i">
        <h2>{{item.name}}</h2>
        <div  class="subProduct" >
          <goods  :goods="item.goods" />
        </div>
      </li>
    </ul>
  </div>
</div>


</template>

<style scoped lang="less">
.breadcrumb{
  width: 70vw;
  margin: 20px auto;
}
.allCategory {
  width: 70vw;
  margin: 0 auto;
  text-align: center;
  h1{
    text-align: center;
    margin: 20px auto;
  }
  a{
    color: #181818;
    :hover{
      text-decoration: none;
    }
  }
}
.childCate{
  display: flex;
  justify-content: space-between;
  img{
    width: 200px;
    height: 200px;
  }
}
.CategoryPage .subCateProduct{
  ul{
    display: flex;
    justify-content: start;
    flex-direction: row;
    li{
      align-items: center;
      background: red;
      width: 30%;
      margin: 2%;
      img{
        width: 100%;
      }
      h2:after,h2:before{
        content: '————';
      }
    }
  }
}
.subProduct {
  ul{
    li{
      align-items: center;
      background: red;
      width: 30% !important;
      margin: 2%;
      img{
        width: 100%;
      }
    }
  }
}
</style>